<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:replace="inc/header"></header>

<body th:with="menu='equipment'">
<nav th:replace="inc/nav"></nav>

<div class="container-fluid">
  <div class="row">
    <div th:replace="inc/sidebar"></div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h1 class="page-header">
        设备管理
        <div class="pull-right">
          <a class="btn btn-primary btn-sm" id="btnAdd">新增</a>
        </div>
      </h1>

      <table class="table table-striped">
        <thead>
        <tr>
          <th>监室号</th>
          <th>监区号</th>
          <th>设备类型</th>
          <th>设备名称</th>
          <th>设备IP</th>
          <th>是否启用</th>
          <th>序列号</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="equipment : ${equipments}">
          <td th:text="${equipment.jsh}"></td>
          <td th:text="${equipment.jqh}"></td>
          <td th:text="${equipmentTypes.get(equipment.type)}"></td>
          <td th:text="${equipment.name}"></td>
          <td th:text="${equipment.ip}"></td>
          <td th:text="${equipment.active} ? '是' : '否'"></td>
          <td th:text="${equipment.serialNo}"></td>
          <td>
            <a class="btn btn-xs btn-primary btnEdit" th:attr="data-id=${equipment.id}">修改</a>
            <a class="btn btn-xs btn-danger btnDelete" th:attr="data-id=${equipment.id}">删除</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="modalSave" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalTitle">新增设备</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id="formSave">
          <input type="hidden" name="jsbh" id="jsbh" th:attr="value=${jsbh}">
          <input type="hidden" name="id" id="id">
          <div class="form-group">
            <label for="jsh" class="control-label col-md-3">监室号</label>
            <div class="col-md-9">
              <input type="text" name="jsh" id="jsh" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="jqh" class="control-label col-md-3">监区号</label>
            <div class="col-md-9">
              <input type="text" name="jqh" id="jqh" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="type" class="control-label col-md-3">设备类型</label>
            <div class="col-md-9">
              <select name="type" id="type" class="form-control" required>
                <option value="">---请选择---</option>
                <option value="equipment">设备</option>
                <option value="client">客户端</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="name" class="control-label col-md-3">设备名称</label>
            <div class="col-md-9">
              <input type="text" name="name" id="name" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="ip" class="control-label col-md-3">设备IP</label>
            <div class="col-md-9">
              <input type="text" name="ip" id="ip" class="form-control" required>
            </div>
          </div>
          <div class="form-group">
            <label for="active" class="control-label col-md-3">是否启用</label>
            <div class="col-md-9">
              <label class="radio-inline">
                <input type="radio" name="active" id="activeTrue" value="true" checked> 是
              </label>
              <label class="radio-inline">
                <input type="radio" name="active" id="activeFalse" value="false"> 否
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="serialNo" class="control-label col-md-3">序列号</label>
            <div class="col-md-9">
              <input type="text" name="serialNo" id="serialNo" class="form-control">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" id="btnSave">保存</button>
      </div>
    </div>
  </div>
</div>

<div th:replace="inc/footer"></div>
<script th:inline="javascript">
  var $modal = $('#modalSave');
  var $modalTitle = $('#modalTitle');
  var $form = $('#formSave');

  $form.validate();

  // 新增
  $('#btnAdd').on('click', function () {
    $modalTitle.text('新增设备');
    $modal.find('input[type=text], select').val('');
    $modal.find('input[name=id]').val('');
    $('#activeTrue').prop('checked', true);
    $modal.modal('show');
  });

  // 保存
  $('#btnSave').on('click', function () {
    if (!$form.valid()) return;
    var data = $form.serializeDict();
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/e/save']],
      data: data,
      method: 'post',
      success: function () {
        alert('保存成功');
        window.location.reload();
      },
      error: function () {
        alert('保存失败');
      }
    })
  });

  // 删除
  $('.btnDelete').on('click', function () {
    var id = $(this).attr('data-id');
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/e/del']],
      data: {
        id: id
      },
      method: 'post',
      success: function () {
        alert('删除成功');
        window.location.reload();
      },
      error: function () {
        alert('删除失败');
      }
    })
  });

  // 修改
  $('.btnEdit').on('click', function () {
    var id = $(this).attr('data-id');
    $.ajax({
      url: [[${#httpServletRequest.getContextPath()} +'/e/findById']],
      data: {
        id: id
      },
      success: function (data) {
        $form.find('input:not([type=radio]), select').each(function () {
          $(this).val(data[$(this).attr('name')])
        });
        $('input[type=radio]').prop('checked', false);
        if (data.active) {
          $('#activeTrue').prop('checked', true);
        } else {
          $('#activeFalse').prop('checked', true);
        }
        $modalTitle.text('修改设备');
        $modal.modal('show');
      },
      error: function () {
        alert('获取设备详情失败');
      }
    })
  })


</script>
</body>
</html>
